<template>
  <el-dialog
    title="调整模块顺序"
    :visible.sync="myModuleOrderDialog"
    width="30%"
    @open="moduleOrderDialogOpen">
    <div>
      <span style="font-weight: bold">调整所选模块位置为&nbsp;&nbsp;&nbsp;</span>
      <el-select v-model="moduleOrdervalue" placeholder="请选择" size="mini" @change="moduleOrderSelectChange(moduleOrdervalue)">
        <el-option
          key="1"
          label="设为最前"
          value="1">
        </el-option>
        <el-option
          key="2"
          label="设为最后"
          value="1000">
        </el-option>
        <el-option
          key="3"
          label="指定位置"
          value="3">
        </el-option>
      </el-select>
    </div>
    <div v-show="moduleOrderShow">
      <div style="margin-top:10px">
        <el-form :model="orderModuleForm" ref="orderModuleForm" label-width="70px" class="demo-dynamic" label-position="left">
          <el-form-item
            label="调整至:"
            prop="order"
            >
            <el-input-number v-model="orderModuleForm.order" controls-position="right" :min="1" :max="fatherModuleChildrens" size="mini" style="width:100px"></el-input-number><span style="font-size:12px">(总数为<span style="color:red">{{fatherModuleChildrens}}</span>)</span>
          </el-form-item>
        </el-form>
      </div>
    </div>


    <span slot="footer" class="dialog-footer">
        <el-button @click="myModuleOrderDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitModuleOrderForm('orderModuleForm')" size="mini">确 定</el-button>
      </span>
  </el-dialog>
</template>
<style>
</style>
<script>
  import { getModuleById } from '@/view/api/moduleManager.js'
  import { tfGet } from '@/utils/request.js'
  import { yfuSuccessToast } from '@/utils/yfuMessage.js'
  import store from '@/store'
  export default {
    data () {
      return {
        /* table begin */
        tableData: {
          datas: [],
          currentPage: 1,
          totals: 160
        },
        multipleSelection: [],
        /* table end */

        /* search begin */
        select: '1',
        inputText: '',
        /* search end */

        /* temp begin */
        temp: {
          id: '',
          moduleName: '',
          moduleDescribe: '',
          createUser: '',
          createTime: ''
        },
        // form值
        orderModuleForm: {
          name: this.moduleOrderRow.name,
          id: 0,
          order: 0
        },
        // 选中的组织的父对象
        fatherModule: '',
        // 所有子对象的总数
        fatherModuleChildrens: 0,
        // 控制DIALOG的关闭与打开
        myModuleOrderDialog: this.moduleOrderDialog,
        // 排序的值
        moduleOrdervalue: '1',
        // 指定排序是否显示
        moduleOrderShow: false
      }
    },
    // moduleOrderDialog 为DIALOG的开启与关闭   moduleOrderRow为选中的项目
    props: ['moduleOrderDialog', 'moduleOrderRow'],
    methods: {
      getData () {
        console.log(this.moduleOrderRow)
        tfGet(getModuleById.url, (data) => {
          console.log(data)
          this.orderModuleForm.name = data.name
        })
      },
      submitModuleOrderForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 关闭dialog
            this.myModuleOrderDialog = false
            yfuSuccessToast('保存成功')
            this.$emit('on-refresh-change')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // DIALOG打开前的赋值
      moduleOrderDialogOpen () {
        this.orderModuleForm.id = this.moduleOrderRow.id
        this.fatherModule = store.getters.currentModuleName
        this.fatherModuleChildrens = store.getters.currentModuleChildrens
      },
      // 指定位置的显示与否
      moduleOrderSelectChange (row) {
        if (row === '3') {
          this.moduleOrderShow = true
        } else {
          this.moduleOrderShow = false
        }
      }
    },
    // 用于控制DIAOLOG的关闭与打开
    watch: {
      moduleOrderDialog (val) {
        this.myModuleOrderDialog = val // 新增result的watch，监听变更并同步到myResult上
      },
      myModuleOrderDialog (val) {
        this.$emit('on-result-change', val)
      }
    }
  }
</script>
